<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>学生信息管理系统</title>
    <!-- 引入Vue.js -->
    <script src="./js/vue.js" type="text/javascript"></script>
    <script src="./js/axios-0.18.0.js" type="text/javascript"></script>
    <script src="./css/elementui/index.js" type="text/javascript"></script>
    <link rel="stylesheet" href="./css/elementui/index.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        /*头部*/
        .el-header {
            background-color: burlywood;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #e6f1fe;
        }

        .el-main {
            /*background-color: #E9EEF3;*/

        }
    </style>
</head>
<body>
<div id="app">
    <el-container>

        <el-header><h1>学生信息列表</h1></el-header>
        <br>
        <el-main>
            <el-button type="success" style="float: right;color: #3a8ee6;background-color: #dcdfe6" @click="isSave=true,dialogVisible=true,studentForm = {gender:'男'}">添加学员</el-button>
            <el-table
                    :data="studentList"
                    style="width: 100%">
                <el-table-column
                        prop="id"
                        label="id"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="姓名"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="age"
                        label="年龄">
                </el-table-column>
                <el-table-column
                        prop="gender"
                        label="性别">
                </el-table-column>
                <el-table-column
                        prop="phone"
                        label="电话">
                </el-table-column>
                <el-table-column
                        prop="email"
                        label="邮箱地址">
                </el-table-column>
                <el-table-column
                        prop="className"
                        label="班级">
                </el-table-column>
                <el-table-column
                        label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" @click="editStudentHandle(scope.row)">编辑</el-button>
                        <el-button type="warning" @click="deleteStudentHandle(scope.row)">删除</el-button>
                    </template>
                </el-table-column>

            </el-table>
            <el-pagination
                    layout="prev, pager, next"
                    :total="pageInfo.total"
                    @current-change="handleCurrentChange"
                    style="float: right">
            </el-pagination>
        </el-main>
    </el-container>


    <!-- 编辑对话框 -->
    <el-dialog
            :title="isSaveTitle"
            :visible.sync="dialogVisible">
        <el-form label-position="left" label-width="100px"
                 :model="studentForm"
                 ref="form"
                 :rules="rules">
            <el-form-item label="姓名" prop="name">
                <el-input v-model="studentForm.name"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="gender">
                <el-radio v-model="studentForm.gender" label="男">男</el-radio>
                <el-radio v-model="studentForm.gender" label="女">女</el-radio>
            </el-form-item>
            <el-form-item label="年龄" prop="age">
                <el-input v-model="studentForm.age"></el-input>
            </el-form-item>
            <el-form-item label="电话" prop="phone">
                <el-input v-model="studentForm.phone"></el-input>
            </el-form-item>
            <el-form-item label="email" prop="email">
                <el-input v-model="studentForm.email"></el-input>
            </el-form-item>
            <el-form-item label="班级" prop="classid">
                <el-select v-model="studentForm.classid" placeholder="请选择">
                    <el-option
                            v-for="item in classList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>

            <div style="width: 100%;display: flex;justify-content: center">
                <el-button type="success" @click="submitForm">提交</el-button>
                <el-button type="warning" @click="dialogVisible=false">取消</el-button>
            </div>
        </el-form>
    </el-dialog>
</div>
</body>
</html>
<script type="text/javascript">
    //创建Vue实例
    new Vue({
        el: "#app",//对象
        //数据
        data: {
            isSave: false,
            dialogVisible: false,//编辑对话框状态
            studentList: [],
            studentForm: {
                gender: '男'
            },
            rules: {
                name: [{required: true, message: "请输入姓名", trigger: 'blur'}],
                phone: [{required: true, message: "请输入电话", trigger: 'blur'}],
                age: [{required: true, message: "请输入年龄", trigger: 'blur'},],
                gender: [{required: true, message: "请选择性别", trigger: 'change'}],
                email: [{type: 'email', required: true, message: "请输入正确的邮箱", trigger: 'blur'}],
                classid: [{required: true, message: "请选择班级", trigger: 'change'}],
            },
            classList: [],//班级信息
            pageInfo: {
                pageCurrent: 1,
                pageSize: 10,
                total: 0
            }
        },
        //方法
        methods: {
            pageQueryList() {
                axios.get(`/student/${this.pageInfo.pageCurrent}/${this.pageInfo.pageSize}`).then(res => {
                    if (!res.data.flag) {
                        this.$message.error(res.data.message)
                        return;
                    }
                    res = res.data.data
                    this.studentList = res.list
                    this.pageInfo.pageCurrent = res.pageNum
                    this.pageInfo.total = res.total

                    // 解决分页问题 例如删除第二页,第二页只有一条数据,如果删除 数据会停留在第二页
                    if(res.pageNum>0 && res.list.length<1){
                        this.pageInfo.pageCurrent=1
                        this.pageQueryList()// 在重新使用一遍此方法
                    }
                })
            },
            // 分页数量改变时
            handleCurrentChange(pageCurrent) {
                this.pageInfo.pageCurrent = pageCurrent
            },
            // 查询班级
            queryClass() {
                axios.get("/classes").then(res => {
                    // console.log(res);
                    this.classList = res.data.data
                })
            },
            //打开编辑框
            editStudentHandle(row) {
                axios.get("/student/" + row.id).then(res => {
                    this.isSave = false//识别为编辑状态
                    if (res.data.flag) {
                        this.dialogVisible = true
                        this.studentForm = res.data.data
                    } else {
                        this.$message.error(res.data.message)
                    }
                })
            },
            //提交表单
            submitForm() {
                this.$refs['form'].validate(res => {
                    //表单验证通过
                    if (res) {
                        // 是添加
                        if (this.isSave) {
                            axios.post("/student", this.studentForm).then(res => {
                                if (!res.data.flag) {
                                    this.$message.error(res.data.message)
                                    return
                                }
                                this.$message.success(res.data.message)
                                this.pageQueryList()
                                this.dialogVisible = false
                            })
                        } else {
                            //是修改
                            axios.put("/student", this.studentForm).then(res => {
                                if (!res.data.flag) {
                                    this.$message.error(res.data.message)
                                    return
                                }
                                this.$message.success(res.data.message)
                                this.pageQueryList()
                                this.dialogVisible = false
                            })
                        }
                    }
                })
            },
            deleteStudentHandle(row) {
                this.$confirm('确定要删除嘛?', '删除提示:', {
                    distinguishCancelAndClose: true,
                    confirmButtonText: '确定',
                    cancelButtonText: '取消'
                })
                    .then(() => {
                        axios.delete("/student/" + row.id).then(res => {
                            console.log(res.data.flag)
                            if (res.data.flag) {
                                this.$message.success(res.data.message)
                                this.pageQueryList()
                                return
                            }
                            this.$message.error(res.data.message)
                        })
                    })
                    .catch(action => {
                        this.$message("取消删除")
                    });
            },
            handleCurrentChange(pageCurrent) {
                this.pageInfo.pageCurrent = pageCurrent
                this.pageQueryList()
            }
        },
        computed: {
            // 计算标题
            isSaveTitle() {
                return this.isSave == true ? '添加' : '编辑'
            }
        },
        // 挂载--->生命周期函数
        mounted() {
            // 初始化数据查询
            this.pageQueryList()//查询学生信息列表
            this.queryClass()//查询班级
        }
    })
</script>
